<template>
   <navBar>
        <div class="back" slot="navbar-left" @click="goback">
          <img src="~assets/img/common/back.svg" alt="">
        </div>
        <ul class="nav-bar" slot="navbar-center">
          <li
            :class="{activeCurrent: index === currentIndex}"
            v-for="(item,index,) in listBar"
            :key="item"
            @click="changeIndex(index)"
          >
            {{item}}
          </li>
        </ul>
    </navBar>
</template>

<script>
import navBar from 'components/common/navBar/navBar'

export default {
  props: {
    listBar: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    changeIndex (index) {
      this.currentIndex = index
      this.$emit('clickLianDong', index)
    },
    goback () {
      this.$router.back()
    }
  },
  components: {
    navBar
  }
}
</script>
<style lang="less" scoped>
/* @import ''; 引入css类 */
.nav-bar {
  color: var(--color-text);
}
ul {
  display: flex;
  li {
    flex: 1
  }
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activeCurrent {
  color: var(--color-high-text)
}
</style>
